• _Building Disconnected Applications
• Alphabet Button Search
• Cascading Lists - Delay Render
• Computed Columns
• Converting Static Data into SQL Data
• Copying List Layouts
• Creating Kanban Layouts
• Decoded values
• Detail View - Events to Transform Data Before Display and Save
• Dialing a Phone Number Shown in a List
• Disconnected Data Entry - Preventing Duplicate Records when Connectivity is Lost
• Displaying Google Maps in List Rows
• Embedding Detail Views and Lists into a List
• Fixed and Virtual Columns
• Freeform Layout - Hyperlinks
• Geography Searches
• In place editing
• Introducing the List Builder
• Lazy image loading
• List Charts
• List Column Actions
• List column separators
• New Records and Default Values in the Detail View
• Refresh and Filter Operations - User Defined Ajax Callbacks
• SQL Data Source - Group By in SQL - Filter List
• Synchronization using Batches
• Template Items - a5-item Attribute
• Templates - Date Formatting
• Two State Static Images
• Using a Icon to Indicate Selected Rows in a Multi-select List Control
• Using a Slider Control to Scroll a List
• Using Argument Arrays in SQL Queries
• UX Component 'Dirty State'
• Virtual Javascript

Synchronization using Batches

Description

In a disconnected application a user might have been disconnected for quite some time. During this time they may have made a number of edits on their client-side device. When they get their connection back, the user might click a synchronize button in order to push their edits back to the server. However, because they made a large number of edits, it is quite likely that the server might take a while to actually process all of the changes that the user made. While the server is processing information the user/client will be waiting for a response and, if the server takes to long, the client-side device could time out before recieving said response. One way to avoid this problem is to send the user's edits to the server in batches, such that the user can get feedback as to what progress has been made.

A status bar showing how many batches have been submitted after synchronization has started.

Add Synchronization using Batches to a Detail View

1. In the UX Builder on the UX Controls page, open the Other Controls menu. Click on [Placeholder] to add a placeholder control to the component.

   

2. Open the Data Controls menu. Click the [List] option to add a list control.

   

3. In the properties list click on the next to the 'List properties' property, in the List Properties section, to open the List Builder.

   

4. On the Data Source pane set the 'Data Source Type' to SQL.

   

5. Click the button next to the Connection string property and select the Northwind database.

   

6. For the Table name property select the 'Customers' table

   

7. For the 'Field list' property select the 'ContactName', 'Address', 'City', and 'Country' fields.

   

8. In the Return Value section of the Data Source pane, set the 'Return value type' dropdown to 'PrimaryKey'

   

9. Open the List Properties pane. Check the 'Has Detail View' property in the List Properties section.

   

10. Open the List Layout pane. Use the blue > arrows to move the four fields from the Customers table from the Available Fields list to the Columns in List. Click OK to close the List Builder.

    

11. On the UX Controls page, open the Data Controls menu. Click on the [TextBox] option to add a textbox control to the component. Name this control 'ContactName' to match the ContactName field.

    

12. Add a second [TextBox] control to the component, name this textbox 'Address'.

    

13. Add a third [TextBox] control to the component, name this one 'City'.

    

14. Add a final [TextBox] control to the component, name this 'Country'.

    

15. Highlight the four textbox controls and then open the Containers menu.

    

16. Click on the [Container] option. From the Container Type list select None. The container should now encompass the textbox controls.

    

17. Highlight the List Control and click on the List properties property to open the List Builder again.

    

18. Open the Detail View pane. For the Detail view type property select 'Container'

    

19. For the Detail view container property select CONTAINER_1 from the dropdown, this is the container that includes the textbox controls.

    

20. Set the Synchronization batch size property to 1. In a normal application this number would be larger as you would most likely not want to receive an update on the client every time a row of data was pushed to the server.

    

21. Set the 'Placeholder for progress display' property to be 'PLACEHOLDER_1', or the name of the placeholder defined in the first step.

    

22. Click the button next to 'Synchronization progress properties' to open the Synchronization Progress Settings.

    

23. Check the Has Cancel button checkbox. Click OK

    

24. Click OK to close the List Builder. On the UX Controls page open the 'Defined Controls' menu. Click on the 'List-Detail View-Buttons' option.

    

25. On the 'Select Buttons for the List's Detail View' dialog highlight the list control, 'list1'. Check the 'Save' and 'Synchronize' checkboxes. Click OK.

    

26. The final component:

    

27. Now run the component in Live preview. Click on a number of rows and make edits to them in the Detail View. Here Dirty rows appear marked with a yellow triangle.

    

28. When you have made a number of edits, say 8 to 10, click the Save button, then click synchronize. You should see the synchronization progress bar appear in the top part of the screen. In this screen shot the server has not processed all of the batches, as a result the progress bar is only half way complete and some of the rows are still marked as dirty.